<template>
  <div class="item">
    <div class="item-head">
      <p class="count">第 {{ state.num + 1}}/{{ state.questionList.length }} 题</p>
      <div class="rang">
        <div class="rang-bar" :style="{width: (state.num + 1) / (state.questionList.length) * 100 + '%'}"></div>
      </div>
    </div>
    <div class="item-question">
      <div class="item-question__card" v-if="state.questionList.length">
        <div class="num">Q{{ state.num + 1 }}</div>
        <p class="topic">{{ state.questionList[state.num].topic_name }}</p>
        <ul>
          <li v-for="item in state.questionList[state.num].topic_answer">
            <input type="radio" name="answer" :value="item.topic_answer_id" v-model="curAnswerId">
            <span>{{ item.answer_name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="item-next">
      <button class="btn" @click="nextItem" v-if="state.num < state.questionList.length - 1">下一题</button>
      <button class="btn" @click="submit" v-else>提交</button>

    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import useQuestionStore from '../../store/question';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';

const questionStore = useQuestionStore()
const { state, saveAnswerList, addNum } = storeToRefs(questionStore)// state 是一个响应式对象
const curAnswerId = ref(null)

const nextItem = () => {
  // 判断用户选没选
  if (curAnswerId.value === null) return
  // 保存当前题目答案id
  questionStore.saveAnswerList(curAnswerId.value)
  // 下一题，更改进度条
  questionStore.addNum()
  curAnswerId.value = null
}

const router = useRouter()
const submit = () => {
  // 判断用户选没选
  if (curAnswerId.value === null) return
  // 保存当前题目答案id
  questionStore.saveAnswerList(curAnswerId.value)
  // 跳转到第三个页面
  router.push('/score')
}

onMounted(() => {  // 当前页面加载完成后
  questionStore.getQuestionList()
})


</script>

<style lang="less" scoped>
.item{
  background-color: #F0F7FF;
  min-height: 100vh;
  &-head{
    height: 5.6rem;
    padding: 1.3rem 1.4rem;
    box-sizing: border-box;
    background-color: #fff;
    .count{
      font-size: 1.2rem;
      color: #4B5563;
      text-align: center;
    }
    .rang{
      width: 100%;
      height: 0.4rem;
      background-color: #E2E8F0;
      border-radius: 10px;
      margin-top: 0.8rem;
      &-bar{
        height: 100%;
        background-color: #15B8A6;
        width: 10%;
        border-radius: 10px;
      }
    }
  }
  &-question{
    padding: 1.4rem 1.4rem 0 1.4rem;
    &__card{
      padding: 2.1rem;
      border-radius: 16px 16px 16px 16px;
      background-color: #fff;
      .num{
        color: #1F2937;
        font-size: 2.1rem;
        font-weight: 500;
      }
      .topic{
        margin-top: 7px;
        color: #374151;
        font-size: 1.4rem;
        font-weight: 400;
      }
      ul{
        margin-top: 2.1rem;
        li{
          background-color: #F9FAFB;
          padding: 1.4rem;
          font-weight: 400;
          font-size: 1.4rem;
          color: #374151;
          border-radius: 8px;
          display: flex;
          align-items: center;
          margin-bottom: 1.4rem;
          input{
            margin: 0 1.4rem;
          }
        }
      }
    }
  }
  &-next{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 1.4rem;
    background-color: #fff;
    box-sizing: border-box;
    .btn{
      height: 4.2rem;
      width: 100%;
      font-size: 1.4rem;
      font-weight: 500;
      color: white;
      background-color: #15B8A6;
      border: none;
      border-radius: 8px;
    }
  }
}
</style>